Ext.define('ES.view.components.Components',{
	extend:'Ext.container.Container',
	requires:['ES.view.search.SearchBox','ES.view.components.CompThumb','ES.view.components.CompCategories','ES.store.component.CompCategoryStore'],
	alias:'widget.componentspage',
	width:'100%',
	layout:{
		type:'vbox',
		pack:'center',
		align:'center',
		defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
	},
	makeCompData:function(compData){
		var me = this;
		var cContainer = Ext.getCmp('compContainer');
		var cArray = new Array();
		compData.each(function(result){
			var comp = Ext.create('ES.view.components.CompThumb',{
				width:'100%',
				pic:result.get('pic'),
				rating:result.get('rating'),
				title:result.get('title'),
				overview:result.get('overview'),
				compId:result.get('compId'),
				comments:result.get('comments'),
				envSupport:result.get('envSupport'),
				langSupport:result.get('langSupport'),
				version:result.get('version')
			});
			comp.on('OPEN_COMP_DETAIL_PAGE_EVENT',function(title,pic,rating,overview,compId,comments,envSupport,langSupport,version){
				me.addEvents('OPEN_COMP_DETAIL_PAGE_EVENT');
				me.fireEvent('OPEN_COMP_DETAIL_PAGE_EVENT',title,pic,rating,overview,compId,comments,envSupport,langSupport,version)
			})
			cArray.push(comp);			
        });
        cContainer.add(cArray);
	},
	loadTree:function(store){
		Ext.getCmp('categoryTree').setRootNode(store.getRootNode())
	},
	initComponent:function(){
		this.items=[
			{
				xtype:'searchbox'
			},
			{
        		xtype:'container',
        		padding:'20 0 0 0',
        		html: 'Online  portal for collaboration and knowledge sharing',
        		style:{
        			fontSize:'20'
        		}
        	},
        	{
        		xtype:'container',
        		html: 'Search, Create and Share the Re-Usable Components',
        		style:{
        			fontSize:'15'
        		},
        		padding:'0 0 10 0'
        		
        	},
        	{
        		xtype:'container',
        		layout:{
        			type:'hbox',
        			align:'center',
        			pack:'center'
        		},
        		width:'100%',
        		items:[
        			{
        				xtype:'container',
		        		layout:{
		        			type:'vbox',
		        			defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
		        		},
		        		width:'60%',
		        		id:'compContainer',
		        		itemId:'compContainer',
		        		autoScroll:true		
        			},
        			{
        				xtype:'container',
        				layout:{
        					type:'vbox',
        					defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
        				},
        				items:[
        					{
        						xtype:'button',
        						id:'uploadButton',
        						itemId:'uploadButton',
        						text:'+&nbsp;&nbsp;&nbsp;Upload your component',
        						width:200,
        						height:30
        					},
        					{
        						xtype:'compcat',
        						itemId:'categoryTree',
        						width:200,
        						id:'categoryTree'
        					}
        				]
        			}
        		]
        	}
		]
		this.callParent(arguments);
	}
});